<template>
	<view class="container">
		<!-- 顶部Logo -->
		<view class="logo-section">
			<view class="logo-icon">💰</view>
			<text class="app-name">工程款管理系统</text>
			<text class="app-slogan">让工程款管理更简单</text>
		</view>

		<!-- 切换标签 -->
		<view class="tab-section">
			<view class="tab-btn" :class="{ active: currentTab === 'login' }" @click="switchTab('login')">
				<text>登录</text>
			</view>
			<view class="tab-btn" :class="{ active: currentTab === 'register' }" @click="switchTab('register')">
				<text>注册</text>
			</view>
		</view>

		<!-- 登录表单 -->
		<view v-if="currentTab === 'login'" class="form-section">
			<view class="input-group">
				<view class="input-icon">👤</view>
				<input 
					class="input-field" 
					type="text" 
					v-model="loginForm.username" 
					placeholder="请输入用户名"
					maxlength="20"
				/>
			</view>
			<view class="input-group">
				<view class="input-icon">🔒</view>
				<input 
					class="input-field" 
					:type="showLoginPassword ? 'text' : 'password'" 
					v-model="loginForm.password" 
					placeholder="请输入密码"
					maxlength="20"
				/>
				<text class="password-toggle" @click="toggleLoginPassword">
					{{ showLoginPassword ? '👁️' : '🙈' }}
				</text>
			</view>
			<button class="submit-btn" @click="handleLogin" :disabled="!canLogin">
				{{ loginLoading ? '登录中...' : '登录' }}
			</button>
		</view>

		<!-- 注册表单 -->
		<view v-if="currentTab === 'register'" class="form-section">
			<view class="input-group">
				<view class="input-icon">👤</view>
				<input 
					class="input-field" 
					type="text" 
					v-model="registerForm.username" 
					placeholder="请输入用户名"
					maxlength="20"
				/>
			</view>
			<view class="input-group">
				<view class="input-icon">🔒</view>
				<input 
					class="input-field" 
					:type="showRegisterPassword ? 'text' : 'password'" 
					v-model="registerForm.password" 
					placeholder="请输入密码"
					maxlength="20"
				/>
				<text class="password-toggle" @click="toggleRegisterPassword">
					{{ showRegisterPassword ? '👁️' : '🙈' }}
				</text>
			</view>
			<view class="input-group">
				<view class="input-icon">🔒</view>
				<input 
					class="input-field" 
					:type="showConfirmPassword ? 'text' : 'password'" 
					v-model="registerForm.confirmPassword" 
					placeholder="请确认密码"
					maxlength="20"
				/>
				<text class="password-toggle" @click="toggleConfirmPassword">
					{{ showConfirmPassword ? '👁️' : '🙈' }}
				</text>
			</view>
			<button class="submit-btn" @click="handleRegister" :disabled="!canRegister">
				{{ registerLoading ? '注册中...' : '注册' }}
			</button>
		</view>

		<!-- 底部提示 -->
		<view class="bottom-tips">
			<text class="tip-text">{{ currentTab === 'login' ? '还没有账号？' : '已有账号？' }}</text>
			<text class="switch-text" @click="switchTab(currentTab === 'login' ? 'register' : 'login')">
				{{ currentTab === 'login' ? '立即注册' : '立即登录' }}
			</text>
		</view>
	</view>
</template>

<script>
import inputMixin from '@/utils/input-mixin.js'

export default {
	mixins: [inputMixin],
	data() {
		return {
			currentTab: 'login',
			showLoginPassword: false,
			showRegisterPassword: false,
			showConfirmPassword: false,
			loginLoading: false,
			registerLoading: false,
			loginForm: {
				username: '',
				password: ''
			},
			registerForm: {
				username: '',
				password: '',
				confirmPassword: ''
			}
		}
	},
	computed: {
		canLogin() {
			return this.loginForm.username.trim() && this.loginForm.password.trim() && !this.loginLoading
		},
		canRegister() {
			return this.registerForm.username.trim() && 
				   this.registerForm.password.trim() && 
				   this.registerForm.confirmPassword.trim() && 
				   this.registerForm.password === this.registerForm.confirmPassword &&
				   !this.registerLoading
		}
	},
	methods: {
		switchTab(tab) {
			this.currentTab = tab
			// 清空表单
			this.loginForm = { username: '', password: '' }
			this.registerForm = { username: '', password: '', confirmPassword: '' }
			this.showLoginPassword = false
			this.showRegisterPassword = false
			this.showConfirmPassword = false
		},
		toggleLoginPassword() {
			this.showLoginPassword = !this.showLoginPassword
		},
		toggleRegisterPassword() {
			this.showRegisterPassword = !this.showRegisterPassword
		},
		toggleConfirmPassword() {
			this.showConfirmPassword = !this.showConfirmPassword
		},
		handleLogin() {
			if (!this.canLogin) return
			
			this.loginLoading = true
			
			// 模拟登录请求
			setTimeout(() => {
				const users = uni.getStorageSync('users') || []
				const user = users.find(u => 
					u.username === this.loginForm.username && 
					u.password === this.loginForm.password
				)
				
				if (user) {
					// 登录成功
					uni.setStorageSync('currentUser', {
						username: user.username,
						loginTime: new Date().toISOString()
					})
					
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})
					
					// 跳转到首页
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 1500)
				} else {
					uni.showToast({
						title: '用户名或密码错误',
						icon: 'error'
					})
				}
				
				this.loginLoading = false
			}, 1000)
		},
		handleRegister() {
			if (!this.canRegister) return
			
			this.registerLoading = true
			
			// 模拟注册请求
			setTimeout(() => {
				const users = uni.getStorageSync('users') || []
				
				// 检查用户名是否已存在
				const existingUser = users.find(u => u.username === this.registerForm.username)
				if (existingUser) {
					uni.showToast({
						title: '用户名已存在',
						icon: 'error'
					})
					this.registerLoading = false
					return
				}
				
				// 创建新用户
				const newUser = {
					id: Date.now().toString(),
					username: this.registerForm.username,
					password: this.registerForm.password,
					createTime: new Date().toISOString()
				}
				
				users.push(newUser)
				uni.setStorageSync('users', users)
				
				uni.showToast({
					title: '注册成功',
					icon: 'success'
				})
				
				// 自动切换到登录页
				setTimeout(() => {
					this.switchTab('login')
					this.loginForm.username = this.registerForm.username
				}, 1500)
				
				this.registerLoading = false
			}, 1000)
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 60rpx 40rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.logo-section {
	text-align: center;
	margin-bottom: 80rpx;
}

.logo-icon {
	font-size: 120rpx;
	margin-bottom: 20rpx;
}

.app-name {
	font-size: 48rpx;
	font-weight: bold;
	color: white;
	display: block;
	margin-bottom: 10rpx;
}

.app-slogan {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.8);
}

.tab-section {
	display: flex;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 20rpx;
	padding: 8rpx;
	margin-bottom: 60rpx;
}

.tab-btn {
	flex: 1;
	text-align: center;
	padding: 25rpx;
	border-radius: 15rpx;
	transition: all 0.3s;
	color: rgba(255, 255, 255, 0.8);
}

.tab-btn.active {
	background: white;
	color: #667eea;
	font-weight: bold;
}

.form-section {
	background: white;
	border-radius: 30rpx;
	padding: 50rpx 40rpx;
	margin-bottom: 40rpx;
}

.input-group {
	display: flex;
	align-items: center;
	background: #f8f9fa;
	border-radius: 15rpx;
	padding: 25rpx;
	margin-bottom: 30rpx;
	position: relative;
	border: 2rpx solid transparent;
}

.input-group:focus-within {
	border-color: #667eea;
	background: #fff;
}

.input-icon {
	font-size: 36rpx;
	margin-right: 20rpx;
}

.input-field {
	flex: 1;
	font-size: 32rpx;
	color: #333 !important;
	background-color: transparent !important;
	border: none;
	outline: none;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	user-select: text !important;
	-webkit-user-select: text !important;
	-webkit-touch-callout: default;
	-webkit-tap-highlight-color: transparent;
	caret-color: #667eea;
	z-index: 1;
	position: relative;
	height: auto;
	min-height: 68rpx;
	vertical-align: middle;
}

.password-toggle {
	font-size: 36rpx;
	padding: 10rpx;
	cursor: pointer;
}

/* 确保输入框在移动端可以正常输入 */
.input-field:focus {
	outline: none;
	caret-color: #667eea;
}

/* 修复iOS Safari中的输入框问题 */
@supports (-webkit-touch-callout: none) {
	.input-field {
		font-size: 32rpx; /* 保持与设计一致 */
		line-height: 1.4;
	}
}

.submit-btn {
	width: 100%;
	height: 100rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border-radius: 50rpx;
	font-size: 32rpx;
	font-weight: bold;
	border: none;
	margin-top: 20rpx;
}

.submit-btn:disabled {
	background: #ccc;
}

.bottom-tips {
	text-align: center;
}

.tip-text {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.8);
}

.switch-text {
	font-size: 28rpx;
	color: white;
	font-weight: bold;
	margin-left: 10rpx;
}
</style>
